<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>React Document</title>
</head>
<body>
  <div id='test'></div>
  <script src='../js/react.development.js'></script>
  <script src='../js/react-dom.development.js'></script>
  <script src='../js/babel.min.js'></script>
  <script type='text/babel'>
  </script>
</body>
</html>
<!--
  当状态中的数据发生变化时，react会根据新数据生成新的虚拟DOM，react会对新旧虚拟dom进行diff比较

  比较规则：
  旧的虚拟dom找到和新的虚拟dom相同的key：如果内容不变使用之前的真实dom。如果内容变量，则生成新的真实dom，随后替换页面中的真实dom。

  旧的虚拟dom没找到和新的虚拟dom相同的key，根据数据创建新的真实dom随后渲染到也页面

  使用index作为key可能引发的问题：
  逆序增加删除等破坏顺序的操作，会产生没有必要的真实dom更新，界面良好但是效率低下
  如果结构中还包含输入类的dom，会产生错误的dom更新，界面存在错误的显示
  如果不存在数据的你先添加删除等破坏顺序的操作，渲染列表只是用来展示，使用index作为key是没有问题的

  开发中一般使用id、手机号、身份证号、学号的唯一值作为key，如果数据仅作为展示使用，使用index也是可以的
 -->